<template>
	<div class="sys-custDetial-container">
		<el-drawer v-model="state.isVisible" title="客户详情" size="50%">
			<splitpanes>
				<pane size="15">
				<div style="margin-bottom: 45px" v-loading="state.loading">
					<el-tree
						ref="treeRef"
						class="filter-tree"
						:data="state.orgData"
						node-key="id"
						:props="{ children: 'children', label: 'name' }"
						:filter-node-method="filterNode"
						@node-click="nodeClick"
						:show-checkbox="false"
						highlight-current
						:current-node-key="1"
						check-strictly>
					
						<template #default="{ node }">
							<el-icon v-if="node.label == '详细信息' " size="16" style="margin-right: 5px; display: inline; vertical-align: middle"><ele-School /></el-icon>
							<el-icon v-else-if="node.label == '跟进信息'" size="16" style="margin-right: 5px; display: inline; vertical-align: middle"><ele-PriceTag /></el-icon>
							<el-icon v-else-if="node.label == '联系人'" size="16" style="margin-right: 5px; display: inline; vertical-align: middle"><ele-Postcard /></el-icon>
							<el-icon v-else size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-CollectionTag /></el-icon>
							{{ node.label }}
						</template>
					</el-tree>
				</div>			
				</pane>
				<pane size="80">
					<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
						<el-form-item :model="ruleForm"  :inline="true">
							<el-row :gutter="10">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<h1 style="font-size: 24px;">{{ruleForm.custName}}</h1>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb10">
									<el-form-item label="客户来源："  prop="customerSource">
										<div v-if="ruleForm.customerSource===1"> 抖音</div>
										<div v-else-if="ruleForm.customerSource===2 ">快手</div>
										<div v-else-if="ruleForm.customerSource===3 ">小红书</div>
										<div v-else-if="ruleForm.customerSource===4 ">百度搜索</div>
										<div v-else-if="ruleForm.customerSource===5 ">广告</div>
										<div v-else-if="ruleForm.customerSource===6 ">转介绍</div>
										<div v-else-if="ruleForm.customerSource===7 ">线上询价</div>
										<div v-else-if="ruleForm.customerSource===8 ">预约上门</div>
										<div v-else-if="ruleForm.customerSource===9 ">陌拜</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb10">
									<el-form-item label="客户级别："  prop="customerLevel">
										<div v-if="ruleForm.customerLevel===1"> 重点</div>
										<div v-else-if="ruleForm.customerLevel===2 ">普通</div>
										<div v-else-if="ruleForm.customerLevel===3 ">非优先客户</div>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form-item>
					</el-card>

					<el-card shadow="hover" style="margin-top: 15px">
						<!-- 添加 el-card 标题 -->
						<template #header>
						<div class="card-header">基本信息</div>
						</template>
						<el-form>
							<el-row :gutter="20">
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="客户名称：">{{ruleForm.custName}}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="客户来源：">
										<div v-if="ruleForm.customerSource===1"> 抖音</div>
										<div v-else-if="ruleForm.customerSource===2 ">快手</div>
										<div v-else-if="ruleForm.customerSource===3 ">小红书</div>
										<div v-else-if="ruleForm.customerSource===4 ">百度搜索</div>
										<div v-else-if="ruleForm.customerSource===5 ">广告</div>
										<div v-else-if="ruleForm.customerSource===6 ">转介绍</div>
										<div v-else-if="ruleForm.customerSource===7 ">线上询价</div>
										<div v-else-if="ruleForm.customerSource===8 ">预约上门</div>
										<div v-else-if="ruleForm.customerSource===9 ">陌拜</div>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="手机号码：">{{ruleForm.mobilePhone}}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="电话号码：">{{ruleForm.telephone}}</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="客户级别：">
										<div v-if="ruleForm.customerLevel===1"> 重点</div>
										<div v-else-if="ruleForm.customerLevel===2 ">普通</div>
										<div v-else-if="ruleForm.customerLevel===3 ">非优先客户</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="客户状态：">
										<div v-if="ruleForm.customerStatus===1"> 跟进中</div>
										<div v-else-if="ruleForm.customerStatus===2 ">有意向</div>
										<div v-else-if="ruleForm.customerStatus===3 ">无回复</div>
										<div v-else-if="ruleForm.customerStatus===4 ">无意向</div>
										<div v-else-if="ruleForm.customerStatus===5 ">已成交</div>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="客户规模：">
										<div v-if="ruleForm.customerSpecification===1"> 初创企业</div>
										<div v-else-if="ruleForm.customerSpecification===2 ">中小企业</div>
										<div v-else-if="ruleForm.customerSpecification===3 ">大型企业</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="首要联系人：">{{ruleForm.contactName}}</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="客户地址：">{{ruleForm.detailedAddress}}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="详细地址：">{{ruleForm.detailedAddress}}</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="备注：">{{ruleForm.remark}}</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-card>



					<el-card shadow="hover" style="margin-top: 15px">
						<template #header>
							<div class="card-header">系统信息</div>
						</template>
						<el-form>
							<el-row :gutter="20">
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="负责人：">{{ruleForm.updateUserName}}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="创建人：">{{ruleForm.updateUserName}}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="创建时间：">{{ruleForm.createTime}}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="更新时间：">{{ruleForm.updateTime}}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
									<el-form-item label="最后跟进时间：">{{ruleForm.nextContactDate}}</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-card>

				</pane>
			</splitpanes>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup name="custDetial">
import { onMounted, reactive , ref} from 'vue';
import { getAPI } from '/@/utils/axios-utils';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
const ruleForm = ref<any>({});

const state = reactive({
	loading: false,
	isVisible: false,
	orgData: [
		{ id: 1, name: '详细信息' },
		{ id: 2, name: '跟进信息' },
		{ id: 3, name: '联系人' }
	],
});

onMounted(async () => {
	handleQuery();
});

// 查询操作
const handleQuery = async () => {
	state.loading = true;
	state.loading = false;
};

// 打开页面
const openDrawer = async (row: any) => {
	// 改用detail获取最新数据来编辑
	let rowData = JSON.parse(JSON.stringify(row));
	ruleForm .value= rowData;
	debugger
	state.isVisible = true;
};

// 与父组件的交互逻辑
const emits = defineEmits(['node-click']);
const nodeClick = (node: any) => {
	emits('node-click', { id: node.id, name: node.name });
};

const filterNode = (value: string, data: any) => {
	if (!value) return true;
	return data.name.includes(value);
};


// 导出对象
defineExpose({ openDrawer });
</script>
